<!-- 呈现卷子的组件，由多个QuestionItem组成 -->
<template>
  <div
    v-loading="recovering"
    class="px-1 py-3 flex as-vertical"
    element-loading-text="正在加载..."
  >
    <!-- 试卷标题 -->
    <h1 class="is-size-4 mb-4">
      <span class="has-text-weight-bold">{{ subjcet }}</span>
      <span class="mx-2"> · </span>
      <span>{{ examTitle }}</span>
    </h1>
    <!-- <div class="is-size-6 mb-2 has-text-grey-light">
      考试编号 No. {{ examId }}
    </div> -->

    <!-- 一、单选题 -->
    <div v-if="singleQuestions.length !== 0">
      <h2 class="is-size-5 mt-4">单选题</h2>
      <el-divider />
      <div v-for="(item, index) in singleQuestions" :key="index">
        <question-item
          :id="'question' + item.id"
          :ref="'question' + item.id"
          :exam-id="examId"
          :qid="item.id"
          :index="index + 1"
          :subject="item.subject"
          :mode="mode"
          type="single"
          :answer="item.choiceAnswer"
          :status="item.status"
          :difficult="item.difficult"
          :correct="item.correct"
          :question="item.info.desc"
          :choices="item.info.choice"
          :single-selected="item.singleSelected"
          :multiple-selected="item.multipleSelected"
        />
      </div>
    </div>

    <!-- 二、多选题 -->
    <div v-if="multipleQuestions.length !== 0">
      <h2 class="is-size-5 mt-5">多选题</h2>
      <el-divider />
      <div v-for="(item, index) in multipleQuestions" :key="index">
        <question-item
          :id="'question' + item.id"
          :ref="'question' + item.id"
          :exam-id="examId"
          :qid="item.id"
          :index="index + 1"
          :subject="item.subject"
          :answer="item.choiceAnswer"
          :mode="mode"
          :status="item.status"
          type="multiple"
          :difficult="item.difficult"
          :correct="item.correct"
          :question="item.info.desc"
          :choices="item.info.choice"
        />
      </div>
    </div>
  </div>
</template>

<script>
import QuestionItem from '@/components/QuestionItem.vue'
import variables from '@/styles/variables.scss'
const examUtils = require('@/utils/exam-utils')
// const examApi = require('@/api/exam')

export default {
  components: {
    QuestionItem
  },
  props: {
    examId: {
      type: Number,
      require: true,
      default: -1
    },
    examTitle: {
      type: String,
      require: true,
      default: 'EXAM TITLE'
    },
    subjcet: {
      type: String,
      require: true,
      default: 'SUBJCET'
    },
    singleQuestions: {
      type: Array,
      require: true,
      default: () => []
    },
    multipleQuestions: {
      type: Array,
      require: true,
      default: () => []
    },
    mode: {
      type: String,
      require: false,
      default: 'exam'
    }
  },
  data() {
    return {
      recovering: true,
      drawer: false
    }
  },
  watch: {},
  mounted() {
    if (this.mode === 'exam') this.recoverSavedAnswer()
    else this.recovering = false
  },
  updated() {},
  variables() {
    return variables
  },

  methods: {
    // 恢复已保存的作答情况
    recoverSavedAnswer() {
      console.log('recoverSavedAnswer.....')
      // 选择组件，设置答案 逐个设置已选答案
      examUtils
        .getAnswersByExamId(this.examId)
        .then(res => {
          // console.log('answers:', res)
          res.forEach(element => {
            this.$nextTick(() => {
              const q = this.$refs[`question${element.qId}`]
              if (q) q[0].setAnswer(element.answer)
            })
          })
          this.recovering = false
          if (res.length !== 0) {
            this.$message('已恢复作答记录 😀')
          }
        })
        .catch(() => {
          this.recovering = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.qlist-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 260px;
}

.qlist-item {
  width: 40px;
  height: 40px;
  margin: 5px;
}
.selected {
  background-color: $primaryColor;
  color: white;
}

.unselected {
  background-color: white;
  color: black;
}
</style>
